<template>
  <view class="full-height">
    <!-- 加载中蒙版 -->
    <qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>
    <!-- 用户信息 -->
    <view class="w-100 pos-rela z-index-1">
      <!-- 顶部背景图 -->
      <image class="bg-img" :src="userInfo.homepage" mode="aspectFill">
      </image>
      <view class="pos-abso w-100 overflow-hidden">
        <!-- #ifdef MP-WEIXIN -->
        <view class="h-100 w-100" :style="{paddingTop:menuObject.height + menuObject.top +30 + 'px'}">
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <view class="h-100 w-100" style="padding-top: 150rpx;">
            <!-- #endif -->
            <view class="flex-dir-col h-100 flex-x-bet w-100 ping-30">
              <!-- 用户头像和基本信息 -->
              <view class="w-100 flex-dir-row ali-item-cen text-border">
                <!-- 头像 -->
                <view class="user-info-avatar-new mr-20">
                  <image mode="aspectFill" :src="(userInfo.avatar)
										      ? userInfo.avatar
										      : 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"/>
                </view>
                <!-- 用户信息和编辑按钮 -->
                <view class="flex-1 flex-dir-col">
                  <view class="flex-dir-row ali-item-cen flex-x-bet w-100 mb-10">
                    <view class="fs-36 fw-700 user-nickname" @click="$NavigateTo('/qmy_user/user/userPersonal')">{{ userInfo.nickname || '立即登录' }}</view>
                    <view @click="$NavigateTo('/qmy_user/user/userPersonal')" v-if="userInfo.nickname" class="edit-profile-btn">
                      <text class="fs-24 col-0">编辑资料</text>
                    </view>
                  </view>
                  <view class="fs-24 user-signature mb-15">{{ userInfo.signature || '这个人很懒，什么都没留下' }}</view>
                  <!-- 数据统计 -->
                  <view class="flex-dir-row ali-item-cen stats-container">
                    <view class="stat-item mr-30">
                      <text class="stat-number">{{ userInfo.likesCount || 0 }}</text>
                      <text class="stat-label ml-5">获赞</text>
                    </view>
                    <view class="stat-item mr-30">
                      <text class="stat-number">{{ userInfo.followingCount || 0}}</text>
                      <text class="stat-label ml-5">关注</text>
                    </view>
                    <view class="stat-item">
                      <text class="stat-number">{{ userInfo.followersCount || 0}}</text>
                      <text class="stat-label ml-5">粉丝</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="pos-abso w-100 bottom-index top-690">
          <view class="flex-dir-row flex-x-bet w-100 ping-0-20">
            <view class="flex-dir-col ali-item-cen active-bg"
                  @click="$NavigateTo('/qmy_user/user/eventManagement')">
              <image class="activity-image"
                     src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/hdgl.png"
                     mode="scaleToFill"/>
              <view class="fs-30 fw-600 col-0">我的活动</view>
            </view>
            <view class="flex-dir-col ali-item-cen active-bg"
                  @click="$NavigateTo('/qmy_user/user/lnformationManagement')">
              <image class="activity-image"
                     src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/qzgl.png"
                     mode="scaleToFill"/>
              <view class="fs-30 fw-600 col-0">我的圈子</view>
            </view>
          </view>
          <view class="ping-0-20 w-100 pb-30">
            <!-- 订单区域 -->
            <view class="br-20 w-100 mt-30 bac-col-f ping-30">
              <view class="flex-dir-row flex-x-bet ali-item-cen w-100">
                <view class="fs-26 fw-600 col-0 ali-item-cen">
                  <image
                      src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/title.png"
                      style="width: 40rpx;height: 40rpx;"></image>
                  <text>我的订单</text>
                </view>
                <view class="flex-dir-row ali-item-cen"
                      @click="$NavigateTo('/qmy_user/user/order/list')">
                  <text class="fs-24 col-87">全部订单</text>
                  <view class="iconfont ic-you fs-28 col-87"></view>
                </view>
              </view>
              <view class="order-grid mt-30">
                <view class="order-grid-item"
                      @click="$NavigateTo('/qmy_user/user/order/list?status=0')">
                  <view class="grid-icon-box">
                    <text class="iconfont ic-daifukuan fs-50" style="color: #ff4f4f;"></text>
                    <text v-if="orderCount.unpaid > 0" class="badge">{{ orderCount.unpaid }}</text>
                  </view>
                  <text class="grid-text">待付款</text>
                </view>
                <view class="order-grid-item"
                      @click="$NavigateTo('/qmy_user/user/order/list?status=1')">
                  <view class="grid-icon-box">
                    <text class="iconfont ic-daifahuo fs-50" style="color: #ffbc1e;"></text>
                    <text v-if="orderCount.unshipped > 0"
                          class="badge">{{ orderCount.unshipped }}
                    </text>
                  </view>
                  <text class="grid-text">待发货</text>
                </view>
                <view class="order-grid-item"
                      @click="$NavigateTo('/qmy_user/user/order/list?status=5')">
                  <view class="grid-icon-box">
                    <text class="iconfont ic-daishouhuo fs-50" style="color: #14cc60;"></text>
                    <text v-if="orderCount.unreceived > 0"
                          class="badge">{{ orderCount.unreceived }}
                    </text>
                  </view>
                  <text class="grid-text">待收货</text>
                </view>
                <view class="order-grid-item"
                      @click="$NavigateTo('/qmy_user/user/order/list?status=6')">
                  <view class="grid-icon-box">
                    <text class="iconfont ic-huochepiao1 fs-50" style="color: #5e9fff;"></text>
                    <text v-if="orderCount.unevaluated > 0"
                          class="badge">{{ orderCount.unevaluated }}
                    </text>
                  </view>
                  <text class="grid-text">待评价</text>
                </view>
                <view class="order-grid-item"
                      @click="$NavigateTo('/qmy_user/user/order/list?status=4')">
                  <view class="grid-icon-box">
                    <text class="iconfont ic-kefuguanli fs-50" style="color: #ff91ba;"></text>
                    <text v-if="orderCount.refunding > 0"
                          class="badge">{{ orderCount.refunding }}
                    </text>
                  </view>
                  <text class="grid-text">退款/售后</text>
                </view>
              </view>
            </view>

            <!-- 参加的活动 -->
<!--            <view class="br-20 w-100 mt-30 bac-col-f ping-30"-->
<!--                  @click="$NavigateTo('/qmy_user/user/myActivities')">-->
<!--              <view class="flex-dir-row flex-x-bet ali-item-cen w-100">-->
<!--                <view class="fs-26 fw-600 col-0 ali-item-cen">-->
<!--                  <image-->
<!--                      src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/title.png"-->
<!--                      style="width: 40rpx;height: 40rpx;"></image>-->
<!--                  <text>参加的活动</text>-->
<!--                </view>-->
<!--                <view class="iconfont ic-you fs-36 col-0"></view>-->
<!--              </view>-->
<!--              <view class="flex-dir-row ali-item-cen w-100 mt-30">-->
<!--                <view class="fs-22 col-00ba31 text-ali-c start-con mr-20">-->
<!--                  进行中 {{ signUpData.ongoing }}-->
<!--                </view>-->
<!--                <view class="fs-22 col-00ba31 text-ali-c start-con">-->
<!--                  已结束 {{ signUpData.ended }}-->
<!--                </view>-->
<!--              </view>-->
<!--            </view>-->

            <view class="w-100 mt-30 bac-col-f ping-30 br-20 mb-20">
              <view v-if="!versionAuditStatus" @click="$NavigateTo('/qmy_user/user/myWallet')"
                    class="flex-dir-row flex-x-bet ali-item-cen pb-30">
                <view class="flex-dir-row ali-item-cen">
                  <view class="iconfont ic-qianbao2-F fs-50 col-0" style="color: #ffe238;"></view>
                  <view class="fs-26 col-0 ml-10">我的钱包</view>
                </view>
                <view class="iconfont ic-you fs-36 col-0"></view>
              </view>
              <view class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen ping-30-0 "
                    @click="$NavigateTo('/pages/list/goods-list')">
                <view class="flex-dir-row ali-item-cen">
                  <text class="iconfont ic-daishouhuo fs-50" style="color: #14cc60;"></text>
                  <view class="fs-26 col-0 ml-10">周边商城</view>
                </view>
                <view class="iconfont ic-you fs-36 col-0"></view>
              </view>
              <view class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen ping-30-0 "
                    @click="$NavigateTo('/qmy_user/user/myCart')">
                <view class="flex-dir-row ali-item-cen">
                  <view class="iconfont ic-a-gouwucheman-mianxing fs-50 col-0"
                        style="color: #ff4f4f;">
                  </view>
                  <view class="fs-26 col-0 ml-10">购物车</view>
                </view>
                <view class="iconfont ic-you fs-36 col-0"></view>
              </view>
              <view class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen ping-30-0 "
                    @click="$NavigateTo('/qmy_user/user/myCollect')">
                <view class="flex-dir-row ali-item-cen">
                  <view class="iconfont ic-shoucang fs-50 col-0" style="color: #ffbc1e;">
                  </view>
                  <view class="fs-26 col-0 ml-10">我的收藏</view>
                </view>
                <view class="iconfont ic-you fs-36 col-0"></view>
              </view>
              <view class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen ping-30-0 "
                    @click="$NavigateTo('/qmy_user/user/address/list')">
                <view class="flex-dir-row ali-item-cen">
                  <view class="iconfont ic-dizhi fs-50 col-0" style="color: #5e9fff;">
                  </view>
                  <view class="fs-26 col-0 ml-10">地址管理</view>
                </view>
                <view class="iconfont ic-you fs-36 col-0"></view>
              </view>
              <view class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen ping-30-0 "
                    @click="$NavigateTo('/qmy_user/user/authentication')">
                <view class="flex-dir-row ali-item-cen">
                  <view class="iconfont ic-renzhengyirenzheng fs-50 col-0" style="color: #50bbef;">
                  </view>
                  <view class="fs-26 col-0 ml-10">组织认证</view>
                </view>
                <view class="iconfont ic-you fs-36 col-0"></view>
              </view>
              <view class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen ping-30-0 "
                    @click="$NavigateTo('/qmy_user/user/problem')">
                <view class="flex-dir-row ali-item-cen">
                  <view class="iconfont ic-changjianwenti2 fs-48 col-0" style="color: #ff91ba;">
                  </view>
                  <view class="fs-26 col-0 ml-10">常见问题</view>
                </view>
                <view class="iconfont ic-you fs-36 col-0"></view>
              </view>
              <!-- <view class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen ping-30-0 "
                @click="$Toast('暂不支持')">
                <view class="flex-dir-row ali-item-cen">
                  <view class="iconfont ic-renzhengyirenzheng fs-50 col-0"></view>
                  <view class="fs-26 col-0 ml-10">组织认证</view>
                </view>
                <view class="iconfont ic-you fs-36 col-0"></view>
              </view> -->
              <!-- #ifdef MP-WEIXIN -->
              <button style="height: auto;line-height: 0;" class="bac-col-f ping-30-0 bor-top-f3"
                      open-type="contact">
                <view class="flex-dir-row flex-x-bet  ali-item-cen ping-30-0 ">
                  <view class="flex-dir-row ali-item-cen">
                    <view class="iconfont ic-kefu1 fs-50 col-0" style="color: #2ed6bf;"></view>
                    <view class="fs-26 col-0 ml-10">联系客服</view>
                  </view>
                  <view class="iconfont ic-you fs-36 col-0"></view>
                </view>
              </button>
              <!-- #endif -->
              <!-- #ifndef MP-WEIXIN -->
              <view @click="$Toast('H5暂不开放联系客服')"
                    class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen ping-30-0 ">
                <view class="flex-dir-row ali-item-cen">
                  <view class="iconfont ic-kefu1 fs-50 col-0" style="color: grey"></view>
                  <view class="fs-26 col-0 ml-10">联系客服</view>
                </view>
                <view class="iconfont ic-you fs-36 col-0"></view>
              </view>
              <!-- #endif -->
<!--              <view v-if="!userInfo.id || tokenExpired < Date.now()"-->
<!--                    @click="$NavigateTo('/qmy_user/login')"-->
<!--                    class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen pt-30 ">-->
<!--                <view class="flex-dir-row ali-item-cen">-->
<!--                  <view class="iconfont ic-guanbituichu fs-50 col-0" style="color: #ff7070;"></view>-->
<!--                  <view class="fs-26 col-0 ml-10">去登录</view>-->
<!--                </view>-->
<!--                <view class="iconfont ic-you fs-36 col-0"></view>-->
<!--              </view>-->
<!--              <view v-else @click="logout" class="flex-dir-row flex-x-bet bor-top-f3 ali-item-cen pt-30 ">-->
<!--                <view class="flex-dir-row ali-item-cen">-->
<!--                  <view class="iconfont ic-guanbituichu fs-50 col-0" style="color: #ff7070;"></view>-->
<!--                  <view class="fs-26 col-0 ml-10">退出登录</view>-->
<!--                </view>-->
<!--                <view class="iconfont ic-you fs-36 col-0"></view>-->
<!--              </view>-->
            </view>
          </view>
        </view>
      </view>

      <!-- 用户信息弹窗 -->
      <wx-user-info-modal v-model="showAuthorizationModal" @updated="updatedUserInfoEvent"></wx-user-info-modal>
    </view>
  </view>
</template>

<script>
import {
  store,
  mutations
} from '@/utils/store.js'

import {getUserInfo} from "@/api/user/user";
import WxUserInfoModal
  from '@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue';


export default {
  name: 'pageE',
  components: {
    WxUserInfoModal
  },
  props: {
    isVisible: {
      type: Boolean,
      required: false
    },
    refresh: {
      type: Boolean,
      required: false
    }
  },
  data() {
    return {
      // #ifdef MP-WEIXIN
      menuObject: uni.getMenuButtonBoundingClientRect(),
      // #endif
      // #ifndef MP-WEIXIN
      menuObject: 0,
      // #endif
      // 我的活动数量
      activityCount: 0,
      // 我的圈子点赞数
      circleLikeCount: 0,
      // 我的圈子数
      circleCount: 0,
      // 我的报名数据
      signUpData: {
        ended: 0,
        ongoing: 0
      },
      userInfo: {},
      dataLoaded: false,
      tokenExpired: null, //token过期时间
      versionAuditStatus: true, // 版本状态
      showAuthorizationModal: false,
      orderCount: {
        unpaid: 0, // 待付款
        unshipped: 0, // 待发货
        unreceived: 0, // 待收货
        unevaluated: 0, // 待评价
        refunding: 0 // 退款/售后
      }
    }
  },

  onLoad() {
    // this.getUserLoginInfo()
  },
  onShow() {
    // this.getUserLoginInfo()
  },
  watch: {
    isVisible(val) {
      console.log('================>');
      
      if (val && !this.dataLoaded) {
        this.dataLoaded = true;
      }
      if (val) {
        this.getUserLoginInfo();
      }
    },
    refresh(e) {

    }
  },
  methods: {

    getUserLoginInfo() {
      // 检查用户是否已登录
      // if (!this.userInfo || !this.userInfo.id) {
      //   console.log('用户未登录，跳过获取用户信息');
      //   return;
      // }

      getUserInfo().then((res) => {
        // 更新store中的用户信息
        if (res.data.code === 200 && res.data.data) {
          this.userInfo = res.data.data
          // 检查是否需要显示授权弹窗
          this.checkAndShowAuthModal();
        }
      }).catch((err) => {
        console.error('获取用户信息失败:', err);
        // 如果是401未授权，可能需要重新登录
        if (err.code === 401) {
          this.$Toast('登录已过期，请重新登录');
          // 跳转登录页
          setTimeout(() => {
            this.$NavigateTo('/qmy_user/login');
          }, 500)
          mutations.logout();
        }
      });
    },

    // 检查并显示授权弹窗
    checkAndShowAuthModal() {
      console.log('检查是否需要显示授权弹窗');

      // 检查用户是否已登录
      if (!this.userInfo || !this.userInfo.id) {
        console.log('用户未登录，不显示弹窗');
        return false;
      }

      // 检查头像是否存在
      const hasAvatar = this.userInfo.avatar ||
          (this.userInfo.avatar_file && this.userInfo.avatar_file.url);

      console.log('头像检查:', {
        avatar: this.userInfo.avatar,
        avatar_file: this.userInfo.avatar_file,
        hasAvatar: hasAvatar
      });

      // 如果没有头像，则显示授权弹窗
      if (!hasAvatar) {
        console.log('用户没有头像，显示授权弹窗');
        setTimeout(() => {
          this.showAuthorizationModal = true;
        }, 1000); // 减少延迟时间
        return true;
      }

      console.log('用户已有头像，不显示弹窗');
      return false;
    },

    // 获取到的用户信息
    async updatedUserInfoEvent(info) {
      console.log('获取到用户信息:', info);
      let avatarUrl = info.avatar;

      try {
        uni.showLoading({
          title: "更新中...",
          mask: true
        });

        // 使用自定义上传方法上传头像
        const {upload} = require('@/utils/request.js');
        const uploadResult = await upload('/file/upload', {
          file: avatarUrl
        });
        let avatar = uploadResult.data.url;

        // 更新用户信息到store
        mutations.updateUserInfo({
          nickname: info.nickname,
          avatar: avatar,
          avatar_file: {
            url: avatar,
            name: `avatar_${this.userInfo.id}_${Date.now()}`,
            extname: avatarUrl.split('.').pop()
          }
        });

        // 关闭弹窗
        this.showAuthorizationModal = false;

        // 显示成功提示
        this.$Toast('头像更新成功');

        console.log('用户头像更新完成:', {
          nickname: info.nickname,
          avatar: avatar
        });

        uni.hideLoading();
      } catch (error) {
        uni.hideLoading();
        console.error('头像更新失败:', error);
        this.$Toast(error.message || '头像更新失败，请重试');
      }
    },

    // 查询版本
    getVersionAuditStatus() {
      this.$Route('get-public-data', true).getVersionAuditStatus().then((res) => {
        this.versionAuditStatus = res.data[0].status;
      })
    },

    logout() {
      mutations.logout()
    },
    // 获取我的活动数量
    getMyActivityCount() {
      this.$Route('get-private-data', !this.dataLoaded).getMyActivityCount().then((res) => {
        this.activityCount = res.data;
        this.dataLoaded = true;
        this.$emit('refreshState', false) //重置刷新状态
      }).catch((err) => {
        this.dataLoaded = true;
        this.$emit('refreshState', false) //重置刷新状态
        console.error('遇到错误:', err); // 打印错误信息
        let {
          code,
          msg
        } = this.$parseError(err); // 调用公共解析方法
        this.$Toast(msg);
      });
    },
    // 获取我的圈子点赞数
    getMyCircleLikeCount() {
      this.$Route('get-private-data', true).getMyCircleLikeCount().then((res) => {
        this.circleLikeCount = res.data;
      }).catch((err) => {
        console.error('遇到错误:', err); // 打印错误信息
        let {
          code,
          msg
        } = this.$parseError(err); // 调用公共解析方法
        this.$Toast(msg);
      });
    },
    // 获取我的圈子数
    getMyCircleCount() {
      this.$Route('get-private-data', true).getMyCircleCount().then((res) => {
        this.circleCount = res.data;
      }).catch((err) => {
        console.error('遇到错误:', err); // 打印错误信息
        let {
          code,
          msg
        } = this.$parseError(err); // 调用公共解析方法
        this.$Toast(msg);
      });
    },
    // 获取我的报名数据
    getMySignUpCount() {
      this.$Route('get-private-data', true).getMySignUpCount().then((res) => {
        this.signUpData = res.data;
      }).catch((err) => {
        console.error('遇到错误:', err); // 打印错误信息
        let {
          code,
          msg
        } = this.$parseError(err); // 调用公共解析方法
        this.$Toast(msg);
      });
    },
    // 获取订单数量统计
    getOrderCount() {
      this.$Route('get-private-data', true).getOrderCount().then((res) => {
        this.orderCount = res.data;
      }).catch((err) => {
        console.error('遇到错误:', err);
        let {
          code,
          msg
        } = this.$parseError(err);
        this.$Toast(msg);
      });
    }
  }
}
</script>

<style lang="scss">
.bg-img {
  position: absolute;
  width: 100%;
  opacity: 0.9;
  height: 500rpx;
  top: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(180deg, #a7f6b4 0%, #e8ffe7 100%);

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.8) 100%);
  }
}

.user-info-avatar {
  width: 160rpx;
  height: 160rpx;

  image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}

/* 新的头像样式 - 抖音风格 */
.user-info-avatar-new {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 4rpx solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

  image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}

/* 编辑资料按钮 */
.edit-profile-btn {
  padding: 16rpx 28rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 25rpx;
  border: 1rpx solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(15rpx);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  text {
    font-weight: 500;
  }

  &:active {
    opacity: 0.8;
    transform: scale(0.95);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
  }
}

/* 统计容器 */
.stats-container {
  margin-top: 10rpx;
}

/* 统计项样式 */
.stat-item {
  display: flex;
  align-items: baseline;
}

/* 统计数字 */
.stat-number {
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

/* 统计标签 */
.stat-label {
  font-size: 22rpx;
  color: #666;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

/* 用户昵称样式 */
.user-nickname {
  color: #333;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  max-width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 用户签名样式 */
.user-signature {
  color: #666;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
  max-width: 500rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-bg {
  background: #ffffff;
  width: 48.5%;
  height: 200rpx;
  border-radius: 60rpx;
}


.start-con {
  width: 120rpx;
  height: 45rpx;
  border-radius: 200rpx;
  background: #00ba3215;
  font-weight: normal;
  line-height: 45rpx;
}

.full-height {
  min-height: 100vh;
}

.z-index-1 {
  z-index: 1;
}

.overflow-hidden {
  top: 0;
  left: 0;
  height: 480rpx;
  overflow: hidden;
}

.top-690 {
  top: 460rpx;
}

.activity-image {
  width: 180rpx;
  height: 180rpx;
  margin-top: -30rpx;
}

/* 订单宫格样式 */
.order-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx 0rpx;

  .order-grid-item {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .grid-icon-box {
      position: relative;
      margin-bottom: 10rpx;

      .badge {
        position: absolute;
        top: -10rpx;
        right: -16rpx;
        background-color: #ff4f4f;
        color: #fff;
        font-size: 20rpx;
        padding: 0 8rpx;
        border-radius: 20rpx;
        min-width: 30rpx;
        height: 30rpx;
        line-height: 30rpx;
        text-align: center;
      }
    }

    .grid-text {
      font-size: 24rpx;
      color: #333;
    }

    &:active {
      opacity: 0.7;
    }
  }
}
</style>
